<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件属性-refs-字符串形式ref</title>

  <!-- 引入react核心库 对象：React-->
  <script src="../../js_new/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom  对象：ReactDOM-->
  <script src="../../js_new/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script src="../../js_new/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制  对象：PropTypes-->
  <script src="../../js_new/prop-types.js"></script>
  <style>
    .title {
      background-color: pink;
    }
  </style>

  <style>
    .list {
      width: 200px;
      height: 200px;
      background-color: pink;
      overflow: auto;
    }

    .item {
      height: 40px;
      text-align: center;
    }
  </style>
</head>

<body>

  <!-- 
    getSnapshotBeforeUpdate——更新前获取快照
  -->
  <!-- 准备容器 -->
  <div id="test"></div>


  <script type="text/babel">
    // 1. 创建类式组件
    class Count extends React.Component {

      // 初始化状态
      state = { newsList: [] }

      // 组件挂载时
      componentDidMount() {
        // 每一秒生成一条新闻
        setInterval(() => {
          // 获取状态
          let { newsList } = this.state
          // 模拟新闻数据
          let news = '新闻' + (newsList.length + 1)
          // 更新状态
          this.setState({ newsList: [news, ...newsList] })
        }, 1000)
      }

      // 组件更新前获取快照
      getSnapshotBeforeUpdate(prevProps, prevState) {
        // 获取更新前的容器高度
        let height = this.list.scrollHeight
        return height
      }

      // 注意此周期内部的this.list.scrollHeight为最新的容器高度
      componentDidUpdate(prevProps, prevState, height) {
        // 获取getSnapshotBeforeUpdate的数据
        console.log(height);
        // 让容器内容向上滚动每一项新闻的高度
        this.list.scrollTop += this.list.scrollHeight - height
      }

      // 初始化调用一次、每次状态改变时都会调用
      render() {
        return (
          <div className="list" ref={c => this.list = c}>
            {
              this.state.newsList.map((n, i) => {
                return <div className="item" key={i}>{n}</div>
              })
            }
          </div>

        )
      }
    }

    // 2. 渲染组件到页面
    // 展开运算符批量传递props
    ReactDOM.render(<Count />, document.getElementById('test'))


  </script>
</body>

</html>